<!DOCTYPE html>
<html>
 <head> 
  <title>关于网站限制ie10以下浏览器访问的探讨--闫海的个人博客-芒果小叨</title> 
  <!-- meta tags start --> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <meta name="Keywords" content="个人博客,闫海个人博客,ie10,html5,限制ie访问网站,网站限制浏览" /> 
  <meta name="Description" content="如果网站采用了html5，ie10以下的ie浏览器可能会出现跑位的现象。其实做兼容并不是不可以，但会非常费劲，索性顺应潮流直接淘汰ie10以下的用户。方法如下...." /> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 
  <!-- meta tags end -->
  <!-- favorite icon starts -->
  <link rel="shortcut icon" href="/Public/Index/mobile/images/common/favicon.ico" type="image/x-icon" />
  <!-- favorite icon ends -->
  <!-- CSS files start -->
  <link href="/Public/Index/mobile/css/framework.css" rel="stylesheet" type="text/css" media="all" />
  <link href="/Public/Index/mobile/css/colorbox.css" rel="stylesheet" type="text/css" media="all" />
  <link href="/Public/Index/mobile/css/responsive.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="/Public/Index/mobile/css/hidpi.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="/Public/Index/mobile/css/skin.css" rel="stylesheet" type="text/css" media="all" />
  <link href="/Public/Index/mobile/css/custom.css" rel="stylesheet" type="text/css" media="all" />
  <link href="/Public/Index/mobile/css/elements.css" rel="stylesheet" type="text/css" media="all" />
  <link href="/Public/Index/mobile/css/style.css" rel="stylesheet" type="text/css" media="all" />
  
  <!-- CSS files end -->
  <!-- JavaScript files start --> 
  <script type="text/javascript" src="/Public/Index/mobile/grayscale.js"></script>
  <script type="text/javascript" src="/Public/Index/mobile/js/jquery.min.js"></script>
  <script type="text/javascript" src="/Public/Index/mobile/js/effects.jquery-ui.min.js"></script>
  <script type="text/javascript" src="/Public/Index/mobile/js/jquery.nivo-slider.min.js"></script>
  <script type="text/javascript" src="/Public/Index/mobile/js/custom.js"></script>
  <script type="text/javascript" src="/Public/Index/mobile/js/jquery.colorbox.min.js"></script>
  
  <!-- JavaScript files end -->
 </head>
 <body>
  <!-- website wrapper starts -->
  <div class="websiteWrapper"> 
   <!-- main menu wrapper starts --> 
   <div class="mainMenuOuterWrapper"> 
    <a href="#" class="mainMenuCloseButton"></a> 
    <ul class="mainMenuWrapper"> 
     <li class="currentPage"><a href='/mobile.php/index.html' title='首页'>首页</a></li>
      <li><a href='/mobile.php/list/2.html' title='关于我'>关于我<span> </span></a></li><li><a href='/mobile.php/list/3.html' title='时光轴'>时光轴<span> </span></a></li><li><a href='/mobile.php/list/1.html' title='品味人生'>品味人生<span> </span></a></li><li><a href='/mobile.php/list/5.html' title='技术分享'>技术分享<span> </span></a></li>     <li><a href='/mobile.php/index/article/message.html'  title='给我留言'>给我留言</a></li>
    </ul> 
   </div> 
   <!-- main menu wrapper ends --> 

<script type="text/javascript">
  var url = '/mobile.php/article';
  $(function(){
    var id = '31';
    $.post(url+'/addClick',{'id':id},function(data){
        $("#pclick").html('点击数：' + data);
    });
  })
</script>
   <!-- header wrapper starts --> 
   <div class="headerOuterWrapper pageHeaderWrapper"> 
    <div class="headerWrapper"> 
     <a class="mainLogo" href="/mobile.php/index.html"><img src="/Public/Index/mobile/images/mainLogo.png" alt="" /></a> 
     <a href="#" class="mainMenuButton"></a>
    </div>
    <!-- page title starts --> 
    <h5 class="pageTitle">当前位置：
	<a href="/mobile.php/index.html">首页</a>&nbsp;&gt;&nbsp;
	<a href="/mobile.php/list/5.html">技术分享</a>
	&nbsp;&gt;&nbsp;<a href="/mobile.php/list/12.html">javascript</a>
	</h5>    <!-- page title ends --> 
   </div>
   <!-- header wrapper ends --> 
   <!-- page wrapper starts --> 
   <div class="pageWrapper singlePostPageWrapper"> 
    <!-- post content wrapper starts --> 
    <div class="singlePostContentWrapper">
    <h3 class="pageTitle" style="background:#F0F0F0;color:#333;text-align:center;">关于网站限制ie10以下浏览器访问的探讨</h3> 
     <div class="pageSpacer"></div> 
     <div class="pageSpacer"></div> 
     <div style="word-break: break-all;" class="phoneContent"><p style="text-align: left;">今天检查网站发现了一些问题。其中较为严重的一个是由于网站采用了html5+css3，这样ie10以下的ie浏览器可能会出现跑位的现象。其实做兼容并不是不可以，但会非常费劲，html5我们可以通过一段js把新标签解析成块标签解决兼容性问题，但css3就不是那么顺利了，索性顺应潮流直接淘汰ie10以下的用户。<br/><br/>下面说说怎样鉴别ie浏览器并自动显示更换浏览器的信息，效果如下，假设我是ie10以下的用户，访问本站会提示这样的信息。<br/></p><p style="text-align: center;"><img src="/Uploads/ueditor/image/20150210/54d9dfd325355.jpg" alt="54d9dfd325355.jpg"/></p><p style="text-align: left;">那这个怎样实现呢？由于本人js略渣，所以只能摸索着做，一开始我是这样做的，页面底部js判断，ie9以下会执行if (!+[1,])中的内容，这样我在通过一个ajax的get请求改变页面body中元素的文本：<br/></p><pre class="brush:js;toolbar:false">&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(!+[1,]){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.get(&#39;地址&#39;,&nbsp;function(data){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).html(data);
&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&lt;/script&gt;</pre><p style="text-align: left;">关于使用if (!+[1,])来判断ie9以下的浏览器，这只是利用了ie的一个bug，网上也可以搜到，原理如下：<br/></p><pre class="brush:js;toolbar:false">&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;
alert([1,2]);//相当于alert([1,2].toString());&nbsp;--这在IE与非IE上都相同，都会弹出&quot;1,2&quot;
alert([1,]);//相当于alert([1,].toString());--在非IE的标准浏览器上，js引擎会自动删除最后的&quot;,&quot;，所以在IE上会弹出&quot;1,&quot;，而在非IE上会弹出&quot;1&quot;
alert(+
[1,]);//根据上面的解释，这一句在IE上相当于alert(+&quot;1,&quot;)，而在非IE上相当于alert(+&quot;1&quot;)，正号的作用在于试图将字符
串转换为数字，&quot;1,&quot;当然不是数字，而&quot;1&quot;可以转换为数字1，所以最终的结果：IE上会转换失败弹出&quot;NaN&quot;，而非IE浏览器上会弹出数字&quot;1&quot;
&nbsp;&nbsp;
//上面的+号转换字符串为数字的测试
var&nbsp;s&nbsp;=&nbsp;+&quot;5&quot;;
alert(s+1);
&nbsp;&nbsp;
//ok，到这里为止，我们知道&nbsp;+[1,]&nbsp;最终在IE为上NaN,在非IE浏览器上则为数字1
&nbsp;&nbsp;
//下面再来看看很有个性的NaN
alert(NaN==true);//弹出&nbsp;false
alert(NaN==false);//弹出&nbsp;false
alert(NaN==NaN);//弹出&nbsp;false
&nbsp;&nbsp;
//即NaN不管与谁比较都是false
alert(!NaN);//相当于alert(!(NaN==true))，根据上面的解释当然是弹出true
&nbsp;&nbsp;
&nbsp;&nbsp;
//所以，alert(!+[1,])&nbsp;最终在IE上会弹出&quot;true&quot;，下面再来看看firefox等非IE浏览器上的表现
alert(new&nbsp;Boolean(0));//false
alert(new&nbsp;Boolean(1));//true
alert(new&nbsp;Boolean(-1));//true
//即：数字0会转换为false，其它任何数字都会转换为true，所以最终在非IE浏览器上最终等效于：
alert(!1);
//即
alert(!true)//最终会得到false
&nbsp;&nbsp;
//综上所述：下面的这个判断就能判定浏览器是不是IE
if&nbsp;(!+[1,]){
&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;我是货真价实的IE浏览器!&quot;)
}
else{
&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;我不是IE!&quot;)
}
&lt;/script&gt;</pre><p style="text-align: left;">但我们知道ie9及以上版本已经修复了该bug(除非设置成兼容模式)，这样ie9还是可以正常访问到我的网站，这是我不想看到的，因为ie9只支持部分html5，所以我的网站还是不能正常展示。<br/><br/>另外还有一种方法，if (window.VBArray)来判断，但我试了试这个是所有ie都识别的，但我只是想禁止ie10一下，那怎样才能既简单又快速的判断呢？<br/><br/>借鉴了一下朋友的做法，typeof一下web worker，Web Worker是运行在后台的JavaScript，所有主流浏览器和ie10+都支持web worker，所以我们可以检测用户的浏览器是否支持它：<br/></p><pre class="brush:js;toolbar:false">&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(typeof(Worker)&nbsp;===&nbsp;&quot;undefined&quot;){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.get(&#39;地址&#39;,&nbsp;function(data){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;body&#39;).html(data);
&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&lt;/script&gt;</pre><p style="text-align: left;">其实思路有很多，网上还有一种方法：<br/></p><pre class="brush:js;toolbar:false">&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;
var&nbsp;hasStrictMode&nbsp;=&nbsp;(function()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;use&nbsp;strict&quot;;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;this&nbsp;===&nbsp;undefined;
}());
&lt;/script&gt;</pre><p style="text-align: left;">ECMAScript 5 (ES5)中JavaScript语法支持严格模式：”use strict”，在严格模式下，匿名函数中的this不再指向全局window（关于this），this的值为”undefined”，所以下面函数返回的值为true时，就可以判断为支持严格模式的现代浏览器。<br/>浏览器支持情况:<br/>IE10+<br/>Firefox4+<br/>Chrome11+<br/>Opera11.6+<br/>Safari5.14+<br/>解决一个问题的方法有很多，我们总是希望能够更简单方便快速，如果有更好的方法希望大家能告诉我哦。网站留言或QQ交流。&nbsp;&nbsp; <br/></p></div>
     <div class="textBreak"></div> 
    </div> 
    <!-- post content wrapper ends --> 
    <!-- post info starts --> 
    <div class="singlePostInfoWrapper">
     <span class="singleIconWrapper singleIconText iconCalendarDark postInfo postDate">2015-02-10</span>
     <a class="singleIconWrapper singleIconText iconEditDark postInfo postAuthor postInfoNoMargin">闫海</a>&nbsp;&nbsp;
     <span class="singleIconWrapper singleIconText iconArrowRightDark" id="pclick">点击数：451</span>
    </div> 
    <!-- post info ends --> 
    <!-- post links wrapper starts --> 
    <div class="singlePostContentWrapper"> 
     <p>上一篇：<a href="/mobile.php/article/24.html">jquery拖拽效果原理</a></p>
     <p>下一篇：<a href="/mobile.php/article/36.html">jQuery解决跨域问题</a></p>
    </div> 
    <!-- post links wrapper ends --> 
    <!-- comments section wrapper starts --> 
    <div class="commentsSectionWrapper"> 
     <h4 class="commentsTitle">相关阅读：</h4> 
     <!-- comments wrapper starts --> 
     <!-- accordion item wrapper starts --> 
        <div class="accordionContent"> 
         <p><a href="/mobile.php/article/36.html" title="jQuery解决跨域问题">jQuery解决跨域问题</a></p><p><a href="/mobile.php/article/31.html" title="关于网站限制ie10以下浏览器访问的探讨">关于网站限制ie10以下浏览器访问的探讨</a></p><p><a href="/mobile.php/article/24.html" title="jquery拖拽效果原理">jquery拖拽效果原理</a></p><p><a href="/mobile.php/article/22.html" title="JS实现窗口垂直水平居中">JS实现窗口垂直水平居中</a></p><p><a href="/mobile.php/article/21.html" title="首页焦点图轮播代码示例">首页焦点图轮播代码示例</a></p><p><a href="/mobile.php/article/20.html" title="JS写一个浮动广告">JS写一个浮动广告</a></p>        </div> 
     <!-- accordion item wrapper ends -->
     <!-- coments wrapper ends --> 
    </div> 
    <!-- comments section wrapper ends --> 
   </div> 
   <!-- page wrapper ends --> 
   <!-- footer wrapper starts --> 
   <div class="footerWrapper"> 
    <!-- copyright wrapper starts --> 
    <div class="copyrightWrapper"> 
     <!-- copyright starts --> 
     <span class="copyright"><a href="http://www.miitbeian.gov.cn/">鲁ICP备15004472号-1</a></span> 
     <!-- copyright ends --> 
     <!-- back to top button starts --> 
     <a href="" class="backToTopButton"></a> 
     <!-- back to top button ends --> 
    </div> 
    <!-- copyright wrapper ends --> 
   </div> 
   <!-- footer wrapper ends --> 
  </div>
  <!-- website wrapper ends -->
 </body>
</html>